<template>
	<div
		v-if="showLabel"
		class="label"
		:style="{
			backgroundColor:
				props.labelId === '1'
					? '#FF9801'
					: props.labelId === '2'
					? '#5ABB3C'
					: '#4c78fc',
		}"
	>
		<span class="org-type"> {{ props.labelName }}</span>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps({
	labelId: { type: String },
	labelName: { type: String },
})
const tenantDetail = JSON.parse(localStorage.getItem('tenantDetail')!)
const showLabel = computed(
	() => !!tenantDetail.data.tenant_auth.user_org_switch
)
</script>
<style scoped lang="less">
.label {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-family: 'PingFang SC';
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	color: #ffffff;
	height: 16px;
	border-radius: 2px;
	margin-right: 3px;
	max-width: 70px;
	padding: 0 4px;
	vertical-align: middle;
	span {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 100%;
	}
}
</style>
